<template>
  <div class="login">
    <img class="logo" src="../assets/logoname.png" alt="">
    <div class="title">欢迎使用 韩乐讯自媒体平台</div>
    <div class="box" style="font-size:14px;">
      <!-- 标题 -->
      <div class="zhuce">忘记密码</div>
      <!-- 手机号 -->
      <div class="phone">
        <div>手机号</div>
        <input type="text" v-model="phone">
      </div>
      <!-- 验证码 -->
      <div class="code">
        <div class="codetit">验证码</div>
        <input type="text" v-model="code">

        <div class="getcode shoushou" v-if="showdumiao==false" @click="huoqucode">获取验证码</div>
        <div class="getcode" v-if="showdumiao==true" >{{dumiao}}s后重新获取</div>

      </div>
      <!-- 密码 -->
      <div class="password">
        <div>密码</div>
        <input type="password" v-model="password">
        <div class="mimastyle">6-20位字母或数字，区分大小写</div>
      </div>
      <!-- 确认密码 -->
      <div class="password">
        <div>确认密码</div>
        <input type="password" v-model="surepassword">
        <div class="mimastyle">6-20位字母或数字，区分大小写</div>
      </div>
      <!-- 登录 -->
      <div class="denglu" @click="chongzhi">确认重置</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
       showdumiao:false,
      dumiao:60,

      phone:"",
      password:"",
      surepassword:"",
      code:""
    }
  },
  methods: {
      // 获取验证码
    huoqucode(){

      if(this.phone==''){
        this.$message({
          showClose: true,
          message: '手机号不能为空',
          type: 'error'
        });
        return
      }

      if(!(/^1[3456789]\d{9}$/.test(this.phone))){ 
        this.$message({
          showClose: true,
          message: '请输入正确手机号',
          type: 'error'
        });
        return
      } 

      this.showdumiao=true
      this.dumiao=60
      var that=this
      that.timer=setInterval(function(){
        that.dumiao=that.dumiao-1
        if(that.dumiao==0){
          that.showdumiao=false
          clearInterval(that.timer)
        }
      },1000)

      this.ajaxcode()
    },
    ajaxcode(){
      var that=this
      this.$get(
          // method: "get",
          "media/users/send_phone",
          {
            phone:this.phone,
            type:'1'
          },
      ).then(response => {
          console.log(response)
          if(response.error=='0'){

          }
      })
    },

    chongzhi(){
      if(this.code==''){
        this.$message({
          showClose: true,
          message: '验证码不能为空',
          type: 'error'
        });
        return
      }
      if(this.password==''){
        this.$message({
          showClose: true,
          message: '密码不能为空',
          type: 'error'
        });
        return
      }

      if(/^[a-zA-Z0-9]{6,20}$/.test(this.password)){
          this.$message({
          showClose: true,
          message: "密码格式不正确",
          type: "error"
        });
        return;
      }
      if(this.surepassword==''){
        this.$message({
          showClose: true,
          message: '确认密码不能为空',
          type: 'error'
        });
        return
      }

      if(/^[a-zA-Z0-9]{6,20}$/.test(this.surepassword)){
          this.$message({
          showClose: true,
          message: "确认密码格式不正确",
          type: "error"
        });
        return;
      }

      this.$axios({
          method: "post",
          url: "media/users/registered",
          data:this.$qs.stringify({
            phone:this.phone,
            code:this.code,
            password:this.password,
            password_confirmation:this.surepassword,
            // 类型（1-注册 2-找回密码）
            type:"2"

          }),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
          },
        })
        .then(response => {
          console.log(response)
          if(response.data.error=='0'){

            // localStorage.setItem("uqid",response.data.data.uqid)
            this.$message({
              showClose: true,
              message: '重置成功',
              type: 'success'
            });

            this.$router.push({name: "login", params: {}})

          }else{
            this.$message({
              showClose: true,
              message: response.data.message,
              type: 'error'
            });
          }
        })


    }
  }
}
</script>

<style scoped>

.mimastyle{
  font-size:12px;
  /* font-family:.PingFang SC; */
  font-weight:300;
  line-height:17px;
  /* color:rgba(172,172,172,1); */

  color:rgba(172,172,172,1);
}
.login{
  width: 100vw;
  height: 100vh;
  background: url(../assets/bg.png) no-repeat; 
  background-size:100% 100%;
  position: relative;
}
.logo{
  position: absolute;
  left: 68px;
  top: 35px;
}
.title{
  position: absolute;
  left: 72px;
  bottom: 108px;
  font-size:28px;
  font-weight:300;
  line-height:40px;
  color:rgba(255,255,255,1);
  opacity:1;
}
.box{
  position: absolute;
  right: 107px;
  bottom: 98px;
  width:500px;
  height:640px;
  background:rgba(255,255,255,1);
  opacity:1;
  border-radius:10px;
  padding: 0 69px;
  box-sizing: border-box;
}
/* 标题 */
.zhuce{
  font-size:16px;
  font-weight:300;
  line-height:22px;
  color:rgba(51,51,51,1);
  opacity:1;
  margin-top: 72px;
  text-align: center;
}
/* 手机号 */
.phone{
  width: 100%;
  margin-top: 31px;
}
.phonetit{
  font-size:16px;
  font-weight:300;
  line-height:22px;
  color:rgba(51,51,51,1);
  opacity:1;
}
input{
  width:100%;
  height:48px;
  border:1px solid rgba(231,237,252,1);
  opacity:1;
  border-radius:3px;
  margin-top: 11px;
  font-size:14px;
  font-weight:300;
  line-height:20px;
  color:rgba(51,51,51,1);
  padding: 14px 22px;
  box-sizing: border-box;
}
/* 密码 */
.password{
  width: 100%;
  margin-top: 18px;
}
.passwordtit{
  font-size:16px;
  font-weight:300;
  line-height:22px;
  color:rgba(51,51,51,1);
  opacity:1;
}
/* 验证码 */
.code{
  width: 100%;
  margin-top: 18px;
  position: relative;
}
.codetit{
  font-size:16px;
  font-weight:300;
  line-height:22px;
  color:rgba(51,51,51,1);
  opacity:1;
}
.getcode{
  position: absolute;
  right: 22px;
  top: 46px;
  font-size:14px;
  font-weight:300;
  line-height:20px;
  color:rgba(92,92,92,1);
  opacity:1;
}
/* 登录 */
.denglu{
  width:362px;
  height:50px;
  background:rgba(38,106,255,1);
  opacity:1;
  border-radius:3px;
  line-height: 50px;
  font-size:16px;
  font-weight:300;
  line-height:50px;
  color:rgba(255,255,255,1);
  opacity:1;
  text-align: center;
  margin-top: 22px;
}
</style>